<template>
	<div style="width: 600px; margin: 0 auto">
		<h3 style="text-align: center">登录</h3>

		<el-form v-loading="loading" ref="form" :model="form" label-width="80px">
			<el-form-item label="账号">
				<el-input v-model="form.username" ref="username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="form.password" ref="password"></el-input>
			</el-form-item>
			<el-form-item label="验证码" style="position: relative">
				<el-input v-model="form.code" ref="code" style="width: 150px"></el-input>&nbsp;
				<img v-if="captcha_src" :src="captcha_src" alt
					style="position: absolute; top: 0; height: 50px; cursor: pointer" @click="reload_captcha" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import md5 from "js-md5";
	import Cookies from "js-cookie";
	export default {
		data() {
			return {
				loading: false,
				captcha_src: "",
				captcha_md5: "",
				form: {
					username: "admin",
					password: "123456",
					code: "",
					captcha_key: ""
				}
			};
		},
		async mounted() {
			if (typeof Cookies.get("auth") != "undefined") {
				uni.reLaunch({
					url: '/pages/home/index'
				});
				return;
			}
			//加载验证码
			this.reload_captcha();
		},
		methods: {
			reload_captcha() {
				this.$axios
					.post("/api/image_captcha/index", {
						r: Math.random()
					})
					.then(data => {
						this.captcha_src = data.data.base64.replace("\r\n", "");
						this.form.captcha_key = data.data.key;
						this.form.code = "";
						this.captcha_md5 = data.data.md5;
					})
					.catch(error => {
						this.$message.error(error.toString());
					});
			},
			onSubmit() {
				//console.log(this.form);
				if (!this.form.username) {
					this.$message.error("账号不能为空");
					this.$refs.username.focus();
					return;
				}
				if (!this.form.password) {
					this.$message.error("密码不能为空");
					this.$refs.password.focus();
					return;
				}
				if (!this.form.code) {
					this.$message.error("验证码不能为空");
					this.$refs.code.focus();
					return;
				}
				if (md5(this.form.code) != this.captcha_md5) {
					this.$message.error("验证码不正确");
					this.form.code = "";
					this.$refs.code.focus();
					return;
				}

				this.loading = true;
				this.$axios
					.post("/api/welcome/login", this.form)
					.then(data => {
						//console.log(response);
						this.loading = false;
						if (data.code > 0) {
							//cookie
							Cookies.set("userid", data.data.userid);
							Cookies.set("username", data.data.username);
							Cookies.set("groupid", data.data.groupid);
							Cookies.set("auth", data.data.auth);
							Cookies.set("power", JSON.stringify(data.data.power));


							this.$alert(data.msg, "系统提醒", {
								confirmButtonText: "确定",
								callback: action => {
									//跳转到会员中心首页
									uni.reLaunch({
										url: "/pages/home/index"
									})
								}
							});
						} else {
							this.$alert(data.msg, "系统提醒", {
								confirmButtonText: "确定",
								callback: action => {
									try {
										if (data.element) {
											this.$refs[data.element].value = "";
											this.$refs[data.element].focus();
										}
									} catch (e) {}
								}
							});
						}
					})
					.catch(error => {
						this.loading = false;
						this.$message.error(error.toString());
					});
			}
		}
	};
</script>

<style scoped>

</style>
